<template>
	<div class="music" v-if="songInfo.al">
		<u-navbar autoBack :bgColor="bgColor" leftIconColor="#fff">
			<view class="u-nav-slot" slot="center">
				<u-tabs lineColor="transparent" :activeStyle="{ color: '#fff' }" :inactiveStyle="{ color: '#989ba1' }" :list="list1" @click="changeTab"></u-tabs>
			</view>
		</u-navbar>
		<!-- 背景图 -->
		<image class="js-img" :src="pictureSize(songInfo.al.picUrl, 700, 700)" mode="aspectFill"></image>
		<div class="bg-cover"></div>
		<!-- 歌曲信息 -->
		<div class="container">
			<div class="info">
				<image :src="pictureSize(songInfo.al.picUrl, 700, 700)" mode="aspectFill"></image>
				<div class="song-name u-line-1">{{ songInfo.name }}</div>
				<div class="singer u-line-1">{{ songInfo.ar[0].name }}</div>
			</div>
			<!-- 歌词及播放条 -->
			<div class="lyric-playbar">
				<div class="lyric u-line-1">{{lyricText}}</div>
				<div class="playbar">
					<u-slider blockSize="14" min="0" max="100" v-model="value" @change="changeValue" @changing="changingValue"></u-slider>
					<div class="paly-time">
						<div class="start">{{ formatTime(playTime) }}</div>
						<div class="end">{{ $u.timeFormat(durationTime, 'MM:ss') }}</div>
					</div>
				</div>
			</div>
			<!-- 播放按钮 -->
			<div class="play-button">
				<div class="mode">
					<image v-if="mode == 'play_order'" @click="handleMode('play_order')" src="@/static/images/player/play_order.png" mode=""></image>
					<image v-else-if="mode == 'play_random'" @click="handleMode('play_random')" src="@/static/images/player/play_random.png" mode=""></image>
					<image v-else @click="handleMode('play_repeat')" src="@/static/images/player/play_repeat.png" mode=""></image>
				</div>
				<div class="switchover">
					<image src="@/static/images/player/play_prev.png" mode=""></image>
					<div class="player">
						<image v-if="player != 'play_resume'" @click="handlePlayer('play_pause')" src="@/static/images/player/play_resume.png" mode=""></image>
						<image v-else @click="handlePlayer('play_resume')" src="@/static/images/player/play_pause.png" mode=""></image>
					</div>
					<image src="@/static/images/player/play_next.png" mode=""></image>
				</div>
				<div class="play-list"><image src="@/static/images/player/play_music.png" mode=""></image></div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { pictureSize } from '@/utils/pictureSize.js';
import { formatTime } from '@/utils/formatCount.js';
import { formatLyric } from '@/utils/formatLyric.js';
const audioContext = uni.createInnerAudioContext();
export default {
	data() {
		return {
			list1: [
				{
					name: '歌曲'
				},
				{
					name: '歌词'
				}
			],
			bgColor: 'transparent',
			value: 0,
			mode: 'play_order',
			player: 'play_resume',
			playTime: 0,
			durationTime: 0,
			hasSliderChanging: false,
			lyricList: [],
			lyricText: '',
			lyricIndex: 0,
			hasLyric: true
		};
	},
	async onLoad(options) {
		await this.$store.dispatch('home/fetchSongInfo', options.id);
		await this.$store.dispatch('home/fetchLyrics', options.id);
		this.durationTime = this.songInfo.dt;
		this.handleContext(options.id);
		this.lyricList = formatLyric(this.lyrics)
	},
	computed: {
		...mapGetters(['songInfo', 'lyrics'])
	},
	methods: {
		pictureSize,
		formatTime,
		changeTab(item) {
			if (item.name == '歌曲' ) {
				this.hasLyric = false
			} else{
				this.hasLyric = true
			}
		},
		handleContext(id) {
			audioContext.src = `https://music.163.com/song/media/outer/url?id=${id}.mp3`;
			audioContext.autoplay = true;
			audioContext.onTimeUpdate(() => {
				if (!this.hasSliderChanging) {
					uni.$u.throttle(this.handleUpdate(), 800);
					
					// 歌词
					if (!this.lyricList.length) return
					let index = this.lyricList.length -1
					for (let i = 0; i < this.lyricList.length; i++) {
						const info = this.lyricList[i]
						if (info.time > audioContext.currentTime * 1000) {
							index = i -1
							break
						}
					}
					if (index == this.lyricIndex) return
					this.lyricText = this.lyricList[index].text
					this.lyricIndex = index
				}
			});
			audioContext.onWaiting(() => {
				audioContext.pause()
			})
			audioContext.onCanplay(() => {
				audioContext.play()
			})
		},
		handleUpdate() {
			this.playTime = audioContext.currentTime * 1000;
			this.value = (this.playTime / this.songInfo.dt) * 100;
		},
		changeValue(value) {
			const sliderValue = (value / 100) * this.durationTime;
			this.value = sliderValue;
			this.playTime = sliderValue;
			audioContext.seek(this.value / 1000);
			this.hasSliderChanging = false;
		},
		changingValue(value) {
			const playTime = (value / 100) * this.playTime;
			this.playTime = playTime;
			this.hasSliderChanging = true;
		},
		handleMode(event) {
			if (event == 'play_order') {
				this.mode = 'play_random';
			} else if (event == 'play_random') {
				this.mode = 'play_repeat';
			} else if (event == 'play_repeat') {
				this.mode = 'play_order';
			}
		},
		handlePlayer(event) {
			if (event != 'play_resume') {
				this.player = 'play_resume';
				audioContext.play();
			} else {
				this.player = 'play_pause';
				audioContext.pause();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.js-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
}
.music {
	position: relative;
	.js-img {
		@extend .js-bg;
	}
	.bg-cover {
		@extend .js-bg;
		background-color: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(20rpx);
	}
}
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 160rpx;
	color: #fff;
	.info {
		image {
			width: 600rpx;
			height: 600rpx;
			border-radius: 12rpx;
		}
		.song-name {
			font-size: 40rpx;
			font-weight: 650;
			padding-top: 20rpx;
		}
		.singer {
			font-size: 24rpx;
			padding-top: 10rpx;
		}
	}
	.lyric-playbar {
		padding: 30rpx 0;
		/deep/ uni-slider {
			margin: 30rpx 2rpx 20rpx 2rpx;
		}
		.lyric {
			text-align: center;
			width: 600rpx;
		}
		.paly-time {
			width: 600rpx;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
		}
	}
	.play-button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 600rpx;
		padding-top: 30rpx;
		image {
			width: 80rpx;
			height: 80rpx;
		}
		.switchover {
			display: flex;
			align-items: center;
			.player {
				padding: 0 20rpx;
				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}
}

/* #ifdef APP-PLUS */
	.container {
		padding-top: 250rpx;
	}
/* #endif */
</style>
